import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input, Select, DatePicker,InputNumber,Radio } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';

import styles from './addpdt.less';

const InputGroup = Input.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const dateFormat = 'YYYY/MM/DD';
const nowDate = new Date();
const PdtCreateForm = Form.create()(
	(props) => {
		const { visible, onCancel, onCreate, form } = props;
		const { getFieldDecorator } = form;

		return (
			visible ?
				<Modal
					className={`${styles.addPdtItem} add-panel`}
					visible={visible}
					title="新增"
					okText="提交"
					cancelText="取消"
					onCancel={onCancel}
					onOk={onCreate}
				>
					<Form layout="vertical">
						<FormItem label="产品名称">
							{getFieldDecorator('productName', {
								rules: [
								  { required: true, whitespace: true, message: '请输入产品名称!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label="起始资产">
							{getFieldDecorator('initialAssets', {
								rules: [
									{ whitespace: true, pattern: /^\d+(\.\d+)?$/, message: '请输入数字!' },
								  { required: true, whitespace: true, message: '请输入起始资产!' },
								],
							})(
								<div>
									<InputGroup>
										<Input
											style={{ width:"80%", }}
										/>
										<Select defaultValue="人民币" style={{ width:"20%", }}>
					            <Option value="rmb">人民币</Option>
					          </Select>
	          
									</InputGroup>
								</div>
								
							)}
							
						</FormItem>
						{/*<FormItem >
							{getFieldDecorator('currency', {
							})(
								<div>
									<Select
										placeholder="请选择您的交易货币"
										defaultValue = "rmb"
									>
						        <Option value ="rmb">人民币</Option>
				        	</Select>
								</div>
								)}
						</FormItem>*/}
						<FormItem label="产品Code">
							{getFieldDecorator('productCode', {
								rules: [
								  { required: true, whitespace: true, message: '请输入产品Code!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label="产品类别">
							{getFieldDecorator('origProductType', {
								rules: [
								  { required: true, whitespace: true, message: '请输入产品类别!' },
								],
							})(
								<Input />,
								)}
						</FormItem>
						<FormItem label ="股票费率">
							{getFieldDecorator('sharesRate',{
								rules: [
									{ required: true, message: '请输入股票费率!' },
									{ whitespace: true, pattern: /^\d+(\.\d+)?$/, message: '请输入数字!' },
								],
									initialValue: 0 ,
							})(
								<div>
									<Input
										defaultValue='0'
										style={{ width:"93%", }}
									/>&nbsp;&nbsp;
									<span>%</span>
								</div>
								)}
						</FormItem>
						<FormItem label="期货费率">
							{getFieldDecorator('futuresRate',{
								rules: [
									{ required: true, message: '请输入期货费率!' },
									{ whitespace: true, pattern: /^\d+(\.\d+)?$/, message: '请输入数字!' },
								],
									initialValue: 0 ,
							})(
								<div>
									<Input
										defaultValue='0'
										style={{ width:"93%", }}
									/>&nbsp;&nbsp;
									<span>%</span>
								</div>
								)}
						</FormItem>
						<FormItem label="保证金比例">
							{getFieldDecorator('bondRate',{
								rules: [
									{ required: true, message: '请输入保证金比例!' },
									{ whitespace: true, pattern: /^\d+(\.\d+)?$/, message: '请输入数字!' },
								],
									initialValue: 0 ,
							})(
								<div>
									<Input
										defaultValue='0'
										style={{ width:"93%", }}
									/>&nbsp;&nbsp;
									<span>%</span>
								</div>

								)}
						</FormItem>
						<FormItem label="生效日期">
							{getFieldDecorator('effectiveDate',{
								rules: [
								  { required: true, message: '请选择时间!' },
								],
									initialValue: moment(nowDate),
							})(
								<DatePicker format={dateFormat} />,
								)}
						</FormItem>
						<FormItem label="是否考虑现金">
							{getFieldDecorator('isIncludeCash',{
								rules: [
								  { required: true, message: '请选择是否考虑现金!' },
								],
									initialValue: '1',
							})(
								<Radio.Group>
	                <Radio value='1'>是</Radio>
	                <Radio value='0'>否</Radio>
	              </Radio.Group>
								)}
						</FormItem>
						<FormItem label="产品描述">
							{getFieldDecorator('description', {
							})(
								<Input />,
								)}
						</FormItem>
					</Form>
				</Modal> : null
		);
	},
);
const mapStateToProps = state => ({
	list: state.pdtmanagement.list,
	page: state.pdtmanagement.page,
});
const mapDispatchToProps = {
	getpdtList: query => ({
		type: 'pdtmanagement/getpdtList',
		payload: query || {},
	}),
	addPdt: query => ({
		type: 'pdtmanagement/addPdt',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class Addtra extends PureComponent {

	static propTypes = {
		form: PropTypes.object.isRequired,
		addPdt: PropTypes.func.isRequired,
	}

	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}

	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-panel .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}
	}

	@autobind
	showModal() {
		this.setState({ visible: true });
	}

	@autobind
	handleCancel() {
		this.setState({ visible: false });
	}

	@autobind
	handleCreate() {
		const form = this.form;
		const { getpdtList, addPdt } = this.props;
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			console.log('Received values of form:>>>', values);
			form.resetFields();
			this.setState({ visible: false });
			const selectDate = moment(values.effectiveDate).format('YYYY-MM-DD');
			values.effectiveDate = selectDate
			values.bondRate = +values.bondRate
			values.futuresRate = +values.futuresRate
			values.initialAssets = +values.initialAssets
			values.sharesRate = +values.sharesRate
			values.isIncludeCash = +values.isIncludeCash
			addPdt({
				...values,
			});
			getpdtList()
		});
	}

	@autobind
	saveFormRef(form) {
		this.form = form;
	}

	render() {
		const { list, page } = this.props;
		return (
			<div className={styles.addButtonWrapper}>
				<Button type="primary" onClick={this.showModal} >新增</Button>
				<PdtCreateForm
					list={list}
					page={page}
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
				/>
			</div>
		);
	}
}
export default Form.create({
})(Addtra);
